@import 'mixins/clear.less';

#wrapper {
    section {
        width: 1200px;
        margin: 30px auto 0;
        .clearfix();

        // 左边的侧边栏
        aside {
            width: 210px;
            border: 1px solid #ccc;
            float: left;
            .clearfix();

            .sideTop {
                .clearfix();

                h4 {
                    height: 40px;
                    width: 105px;
                    background-color: #fff;
                    float: left;
                    text-align: center;
                    line-height: 40px;
                    border-bottom: 1px solid #ccc;
                    border-top: 3px solid rgba(0, 0, 0, 0);

                    &.active {
                        text-align: center;
                        line-height: 40px;
                        border-top: 3px solid #e1251b;
                        width: 105px;
                        line-height: 37px;
                        border-bottom: none;
                    }
                }
            }

            .sideContent {
                padding: 10px;
                div {
                    &.active {

                        .classification {
                            li {
                                width: 50%;
                                border-bottom: 1px dashed #ededed;
                                line-height: 28px;
                                float: left;
                            }
                        }
    
                        .accessory {
                            margin: 5px 0 15px;
    
                            li {
                                border-bottom: 1px solid #ededed;
    
                                img {
                                    width: 152px;
                                }
    
                                p {
                                    font-size: 16px;
                                    color: #c81623;
                                }
    
                                .button {
                                    margin: 5px 0;
                                    text-align: center;
    
                                    a {
                                        color: #8c8c8c;
                                        padding: 2px 14px;
                                        line-height: 18px;
                                        border: 1px solid #8c8c8c;
                                        text-align: center;
                                    }
                                }
                            }
    
    
                        }
                    }
                }

            }
        }

        .rightDetail {
            float: right;
            width: 980px;

            .combo {
                border: 1px solid #ddd;
                margin-bottom: 15px;

                h4 {
                    border-bottom: 1px solid #ddd;
                    background-color: #f1f1f1;
                    color: #333;
                    padding: 5px 0 5px 15px;
                }

                .listWrap {
                    height: 170px;
                    padding-top: 10px;
                    .clearfix();

                    .left {
                        width: 127px;
                        height: 165px;
                        position: relative;
                        float: left;
                        text-align: center;

                        img {
                            width: 87px;
                            margin: 0 auto;
                        }

                        p {
                            color: #c81623;
                            font-size: 16px;
                        }

                        i {
                            position: absolute;
                            top: 48px;
                            right: -25px;
                            font-size: 16px;
                        }
                    }

                    .middle {
                        width: 668px;
                        height: 165px;
                        float: left;
                        text-align: center;

                        li {
                            height: 127px;
                            margin: 0 20px;
                            float: left;

                            img {
                                width: 120px;
                                height: 130px;
                            }
                        }
                    }

                    .right {
                        border-left: 1px solid #ddd;
                        float: left;
                        width: 153px;
                        height: 165px;
                        padding-left: 20px;

                        div {
                            margin: 10px 0;

                        }

                        p {
                            font-weight: bold;
                            margin-bottom: 10px;
                        }

                        i {
                            color: #b1191a;
                            font-size: 16px;
                            margin-bottom: 10px;
                        }

                        div {
                            button {
                                padding: 10px 25px;
                                font-size: 16px;
                                background-color: #e1251b;
                                color: #fff;
                                border: none;
                            }
                        }
                    }
                }
            }

            .details {
                .tab {
                    .clearfix();
                    background-color: #ededed;

                    li {
                        border: 1px solid #ddd;
                        // 去掉重复边框
                        margin: 0 -1px 0 0;
                        background-color: #fff;
                        height: 40px;
                        padding: 0 11px;
                        float: left;
                        text-align: center;
                        line-height: 40px;

                        &.active {
                            background-color: red;

                            a {
                                color: #fff;
                            }
                        }
                    }
                }

                .tabContent {
                    div {
                        padding-left: 20px;
                        line-height: 25px;
                        display: none;

                        &.active {
                            margin: 10px 0;
                            display: block;
                        }
                    }
                }
            }
        }

    }
}